<template>
    <div class="card-list">
        <Row v-for="row in list" :key="row.id" :row="row" />
    </div>
</template>

<script setup>
import Row from "./row.vue"

const list = [
    { id: 1, name: "日期", data: "2024/09/26", color: "#1cc88a", icon: "sfont system-xiaoxi" },
    { id: 2, name: "温度", data: "22°C", color: "#4e73df", icon: "sfont system-yonghu" },
    { id: 3, name: "存款", data: "10亿", color: "#36b9cc", icon: "sfont system-shuliang_mianxing" },
    { id: 4, name: "寿命", data: "万年", color: "#f6c23e", icon: "sfont system-jindutiaoshouyidaozhang" },
]
</script>

<style lang="scss" scoped>
.card-list {
    width: calc(100% + 20px);
    margin-left: -10px;
    display: flex;
    flex-wrap: wrap;
}
</style>
